import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Table, Button, Spin, Tooltip } from 'antd';
import router from 'umi/router';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';

@connect(({ loading, adjustdetailrec }) => ({
  data: adjustdetailrec.data,
  adjustdetailrec,
  loading: loading.effects['adjustdetailrec/seeagreement'],
}))
@Form.create()
class TableList extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      columns: [
        {
          title: '关联客户',
          dataIndex: 'custName',
          onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        },
        {
          title: '原协议名称',
          dataIndex: 'oldSuppProtName',
          onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
          render: (val, record) => (
            <Tooltip
              title={
                <div>
                  {record &&
                    record.fee &&
                    record.fee.map(item => (
                      <span>
                        {item}
                        <br />
                      </span>
                    ))}
                </div>
              }
            >
              <div
                style={{
                  width: '160px',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap',
                  cursor: 'pointer',
                }}
              >
                {val}
              </div>
            </Tooltip>
          ),
        },
        {
          title: '原价格',
          dataIndex: 'oldPrice',
          onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        },
        {
          title: '新协议名称',
          dataIndex: 'suppProtName',
          onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        },
        {
          title: '新价格',
          dataIndex: 'price',
          onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        },
        {
          title: '签约方',
          dataIndex: 'sendSuppName',
          onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        },
        {
          title: '关联人数',
          dataIndex: 'empNum',
          onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        },

        {
          title: '操作',
          onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
          render: e => <a onClick={() => this.adjustdetailrecList(e)}>批量接单</a>,
        },
      ],
    };
  }

  componentDidMount() {
    this.getDetail();
  }

  getDetail = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'adjustdetailrec/seeagreement',
      payload: {},
    });
  };

  adjustdetailrecList = e => {
    const { dispatch } = this.props;
    const parame = {
      sendSuppId: e.sendSuppId,
      custId: e.custId,
      suppProtId: e.suppProtId,
      areaId: e.areaId,
    };
    dispatch({
      type: 'adjustdetailrec/batchConnec',
      payload: parame,
      callback: () => {
        this.getDetail();
      },
    });
  };

  render() {
    const { columns } = this.state;
    const { data, loading } = this.props;

    return (
      <PageHeaderWrapper>
        <Spin spinning={loading}>
          <Card
            title="协议查询"
            style={{ border: '0px', marginBottom: 24, fontSize: 16, color: '#262626' }}
          >
            <Form>
              <Table columns={columns} dataSource={data.list} pagination={false} />
            </Form>
          </Card>
          <FooterToolbar style={{ width: '100%' }}>
            <Button style={{ marginRight: 10 }} onClick={() => router.goBack()}>
              关闭
            </Button>
          </FooterToolbar>
        </Spin>
      </PageHeaderWrapper>
    );
  }
}

export default TableList;
